<template>
	<view class="calculator-view">
		<view class="calculator-view-top">
			<text class="calculator-view-top-a" v-if="topText || bottomText">{{ topText }}{{ bottomText }}</text>
			<text class="calculator-view-top-a" v-else>0.00</text>
		</view>
		<view class="remarkbox row">
			<text class="labelremark">备注：</text>
			<tn-input v-model="remark" placeholder="点击写备注" />
		</view>
		<view class="calculator-button">
			<view class="calculator-button-left">
				<view class="calculator-button-left-aview center" hover-class="hover-gray" v-for="(item, ix) in calculatorButAList" :key="item">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="numTapA(item)">
						<text class="calculator-button-left-a1">{{ item }}</text>
					</view>
				</view>
				<view class="calculator-button-left-aview center" hover-class="hover-gray">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="numTapC"><text class="calculator-button-left-a1" style="font-weight: bold;">.</text></view>
				</view>
				<view class="calculator-button-left-aview center" hover-class="hover-gray" v-for="(item, ix) in calculatorButBList" :key="item">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="numTapB(item)">
						<text class="calculator-button-left-a1">{{ item }}</text>
					</view>
				</view>
				<view class="calculator-button-left-aview center" hover-class="hover-gray">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="deleteNum">
						<text class="tn-icon-backspace" style="font-size: 50rpx;"></text>
					</view>
				</view>
			</view>
			<!-- 运算符号 -->
			<view class="calculator-button-right">
				<view class="calculator-button-right-a" hover-class="hover-gray" @tap="dateShow = true">
					<text class="mix-icon icon-24gl-calendar" v-if="!datetime"></text>
					<text class="calculator-button-right-a1 datetimebtn">{{ datetime || '今天' }}</text>
				</view>
				<tn-picker mode="time" v-model="dateShow" @confirm="confirmDatePicker" :params="dateParams"></tn-picker>
				<view class="calculator-button-right-a" hover-class="hover-gray" v-for="(item, ix) in calculatorButDList" :key="item" @tap="operationalTapB(item)">
					<text class="calculator-button-right-a1">{{ item }}</text>
				</view>
				<view class="calculator-button-right-a equalbtn" hover-class="hover-opacity" @tap="operationalTapC">
					<text class="calculator-button-right-a1">{{ equal ? '=' : '完成' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datetime: '',
				equal: false,
				dateShow: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				calculatorButAList: ['7', '8', '9', '4', '5', '6', '1', '2', '3'],
				calculatorButBList: ['0'],
				calculatorButCList: ['÷', '×'],
				calculatorButDList: ['+', '-'],
				topText: '',
				bottomText: '',
				remark: ''
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.datetime = e.detail.value.replace(/-/g, '/');
			},
			confirmDatePicker(event) {
				this.datetime = `${event.year}-${event.month}-${event.day}`;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			closeCalculatorPopup() {
				this.$emit('closeCalculatorPopup');
			},
			addvibrateShort() {
				uni.vibrateShort();
			},
			// 清零
			clearAll() {
				this.bottomText = '';
				this.topText = '';
				this.remark = '';
				this.datetime = '';
			},
			// 删除一位字符
			deleteNum() {
				this.addvibrateShort();
				if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
					this.bottomText = '';
					return;
				}
				if (this.bottomText) {
					this.bottomText = this.bottomText.slice(0, -1);
					// if(!this.bottomText){
					// 	this.topText = '';
					// }
					return;
				}

				if (this.topText) {
					let temp = this.topText.split(' ');
					temp.pop();
					this.topText = temp.join(' ');
					// this.topText = this.topText.slice(0, -1);
					// this.topText = '';
				}
			},
			// 1-9输入判断
			numTapA(item) {
				this.addvibrateShort();
				if (this.bottomText.length == 1 && this.bottomText == 0) {
					return;
				}
				if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
					this.bottomText = '';
				}
				this.bottomText += item;
			},
			// 0,00输入判断
			numTapB(item) {
				this.addvibrateShort();
				if (this.bottomText.length == 1 && this.bottomText == 0) {
					return;
				}
				if (item == '00' && this.bottomText == '') {
					return;
				}
				if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
					this.bottomText = '';
				}
				this.bottomText += item;
			},
			// .输入判断
			numTapC() {
				this.addvibrateShort();
				if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
					this.bottomText = '';
				}
				if (!this.bottomText) {
					return;
				}
				if (this.bottomText.indexOf('.') != '-1') {
					return;
				}
				this.bottomText += '.';
			},

			// + - 输入
			operationalTapB(item) {
				this.addvibrateShort();
				if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
					this.bottomText = '';
					return;
				}
				this.equal = true;
				if (this.bottomText) {
					if (this.bottomText.endsWith('.')) {
						return;
					}
					if (this.bottomText.endsWith('-')) {
						return;
					}
					if (this.topText) {
						if (this.topText.endsWith('=')) {
							this.topText = this.bottomText + ' ' + item;
							this.bottomText = '';
							return;
						}
						let numList = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0'];
						let lastT = this.topText.slice(-1);
						if (numList.includes(lastT)) {
							this.topText = this.topText + this.bottomText + ' ' + item;
						} else {
							this.topText = this.topText + ' ' + this.bottomText + ' ' + item;
						}
					} else {
						this.topText = this.bottomText + ' ' + item;
					}
					this.bottomText = '';
					return;
				}
				// 首位字符允许为-
				if (item == '-') {
					this.bottomText = item;
					return;
				}
			},
			// = 输入
			operationalTapC() {
				this.addvibrateShort();
				if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
					this.bottomText = '';
				}
				if (!this.equal) {
					this.$emit('closeCalculatorPopup', { val: this.bottomText, remark: this.remark, time: this.datetime });
					setTimeout(() => {
						this.clearAll();
					}, 500);
				}
				if (this.bottomText) {
					if (this.bottomText.endsWith('.')) {
						return;
					}
					if (this.bottomText.endsWith('-')) {
						return;
					}
					if (this.topText.endsWith('=')) {
						this.topText = this.bottomText;
						this.bottomText = '';
						return;
					}

					let tempA = this.topText + ' ' + this.bottomText;
					this.topText = this.topText + ' ' + this.bottomText + ' ' + '=';

					// 求值
					this.operationHandle(tempA);
					this.equal = false;
					return;
				}
				if (this.topText) {
					let tempA = '';
					let lastT = this.topText.slice(-1);
					if (lastT == '+' || lastT == '-' || lastT == '÷' || lastT == '×' || lastT == '=') {
						tempA = this.topText.slice(0, -2);
					} else if (lastT == ' ') {
						tempA = this.topText.slice(0, -1);
						let t1 = tempA.slice(-1);
						let t2 = ['+', '-', '×', '÷'];
						if (t2.includes(t1)) {
							tempA = tempA.slice(0, -1);
						}
						this.topText = this.topText + ' ' + '=';
					} else {
						tempA = this.topText;
						this.topText = this.topText + ' ' + '=';
					}

					// 运算求值
					this.operationHandle(tempA);
				}
			},
			// 运算代理
			operationHandle(resStr) {
				let regA = /×/gi;
				let regB = /÷/gi;
				let expression = resStr.replace(regA, '*');
				expression = expression.replace(regB, '/');

				// #ifdef MP-WEIXIN
				// 小程序禁用 eval(),故自行计算结果
				// 将表达式转成数组
				let expressionList = expression.split(' ');
				// 自定义实现 * / 运算
				for (let i = 1; i < expressionList.length; i += 2) {
					let symbol = expressionList[i];
					let left = expressionList[i - 1];
					let right = expressionList[i + 1];
					if (symbol == '*') {
						expressionList[i - 1] = -1;
						expressionList[i] = -1;
						expressionList[i + 1] = left * right;
					}
					if (symbol == '/') {
						expressionList[i - 1] = -1;
						expressionList[i] = -1;
						expressionList[i + 1] = left / right;
					}
				}
				// 去除标空数据 -1
				expressionList = expressionList.filter(item => item != -1);

				// 自定义实现 + - 运算
				for (let i = 1; i < expressionList.length; i += 2) {
					let symbol = expressionList[i];
					let left = expressionList[i - 1];
					let right = expressionList[i + 1];
					if (symbol == '+') {
						expressionList[i - 1] = -1;
						expressionList[i] = -1;
						expressionList[i + 1] = left * 1 + right * 1;
					}
					if (symbol == '-') {
						expressionList[i - 1] = -1;
						expressionList[i] = -1;
						expressionList[i + 1] = left - right;
					}
				}
				expressionList = expressionList.filter(item => item != -1);
				expressionList = expressionList.filter(item => item);
				// 结果
				let res = expressionList[0];

				if (this.isFloat(res)) {
					res = parseFloat(res.toPrecision(12));
				}
				this.topText = '';
				this.bottomText = res + '';
				return;
				// #endif

				// 结果数值 非小程序
				let resNum = eval(expression);
				if (this.isFloat(resNum)) {
					resNum = parseFloat(resNum.toPrecision(12));
				}
				this.topText = '';
				this.bottomText = resNum + '';
			},
			// 判断是否浮点数
			isFloat(n) {
				return n != parseInt(n);
			}
		}
	};
</script>

<style scoped lang="scss">
	.mix-icon {
		background-color: $base-color;
		color: #ffffff;
	}

	.calculator-view {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		// padding-bottom: 100rpx;
		// box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
	}

	.calculator-view-top {
		box-sizing: border-box;
		width: 750rpx;
		background-color: #ffffff;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.calculator-view-top-a {
		font-size: 45rpx;
		min-height: 44rpx;
		color: #606060;
		text-align: right;
	}

	.calculator-view-top-b {
		margin-top: 20rpx;
		width: 750rpx;
		min-height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.calculator-view-top-b1 {
		width: 480rpx;
		/* white-space: pre-wrap; */
		word-wrap: break-word;
		font-size: 56rpx;
		text-align: left;
		color: #606060;
	}

	.calculator-view-top-b2 {
		width: 80rpx;
		height: 80rpx;
	}

	.calculator-button {
		width: 750rpx;
		display: flex;
		flex-direction: row;
	}

	.calculator-button-left {
		width: 579rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.calculator-button-left-a {
		position: relative;
		width: 170rpx;
		height: 130rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.calculator-button-left-aview {
		width: 193rpx;
		height: 130rpx;
		position: relative;
		border-right: 1px solid #f1f4f4;
		border-top: 1px solid #f1f4f4;
		box-sizing: border-box;
		overflow: hidden;

		&:nth-child(n + 10) {
			border-bottom: 1px solid #f1f4f4;
			box-sizing: border-box;
		}
	}

	.calculator-button-left-a1 {
		font-size: 45rpx;
		color: #212121;
	}

	.calculator-button-left-a:active {
		opacity: 0.7;
	}

	.calculator-button-left-a2 {
		width: 170rpx;
		height: 130rpx;
		position: absolute;
	}

	.calculator-button-right {
		width: 120rpx;
		display: flex;
		flex-direction: column;
	}

	.calculator-button-right-a {
		width: 170rpx;
		height: 130rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-right: 1px solid #f1f4f4;
		border-top: 1px solid #f1f4f4;

		&:nth-child(n + 4) {
			border-bottom: 1px solid #f1f4f4;
			box-sizing: border-box;
		}
	}

	.calculator-button-right-a1 {
		font-size: 50rpx;
		color: #212121;
	}

	.datetimebtn {
		font-size: 28rpx;
		margin-left: 5rpx;
	}

	.calculator-button-right-a:active {
		opacity: 0.7;
	}

	.equalbtn {
		background-color: $base-color;

		text {
			font-size: 30rpx;
		}
	}

	.calculator-view-bottom {
		width: 750rpx;
		height: 110rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.calculator-view-bottom-a {
		width: 160rpx;
		height: 70rpx;
		border-radius: 40rpx;
		margin-left: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
	}

	.calculator-view-bottom-a:active {
		opacity: 0.7;
	}

	.calculator-view-bottom-a1 {
		font-size: 34rpx;
		font-weight: 500;
		color: #212121;
	}

	.remarkbox {
		width: 710rpx;
		margin: 10rpx auto;
		height: 70rpx;
		background-color: #f1f4f4;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		.labelremark {
			margin-left: 10rpx;
			margin-right: 10rpx;
			display: flex;
			font-size: 30rpx;
			line-height: 1;
		}
	}
</style>